/*全局设置*/
html,body{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
section{
  height: 100%;
  position: relative;
}

/*定义的变量和类*/
@color:red;
@width_20: 20px;
@height:100px;

.pos(@l:50%,@r:50%){
  position:absolute;
  left: @l;
  top: @r;
}

.fl(){
  float:left;
}
.fr(){
  float:right;
}

.cir(@radius:50%){
  border-radius: @radius;
}
//版心
.bx(@w:900,@h:600,@l:50%,@t:50%){
  width: @w + 0px;
  height: @h + 0px;

  position: absolute;
  left: @l;
  top: @t;
  margin-left: -@w/2 + 0px;
  margin-top: -@h/2 + 0px;
}

.bg(@col:red){
  background-color: @col;
}

//动画部分
.trans(@tx:0,@ty:0,@tz:0,@rx:0,@ry:0,@rz:0,@sx:1,@sy:1,@sz:1){
  /*transform:translateX(@tx + 0px) translateY(@ty + 0px) translateZ(@tz + 0px) rotateX(@rx + 0deg) rotateY(@ry + 0deg) rotateZ(@rz + 0deg) scaleX(@sx) scaleY(@sy) scaleZ(@sz);*/
  transform:translateX(@tx*1px) translateY(@ty*1px) translateZ(@tz*1px) rotateX(@rx*1deg) rotateY(@ry*1deg) rotateZ(@rz*1deg) scaleX(@sx) scaleY(@sy) scaleZ(@sz);
}
.tDelay(@delay:0.2s){
  transition:all @delay;
}
.pre-3d(){
  transform-style: preserve-3d;
}
.pers(@deg:1000px){
  perspective: @deg;
}
.animas(@name,@time:2s,@count:infinite,@speed:linear){
  animation:@name @time @count @speed;
}


/*公共部分*/

//右侧指示器
.gps{
  ul{
    width:@width_20;
    height: @height;
    position: absolute;
    right:@width_20;
    top: 50%;
    margin-top: -@height/2;
  }
}
.gps{
  ul{
    li{
      width: @width_20 - 5;
      height: @width_20 - 5;
      .cir();
      margin-bottom: @width_20;
      background-color: rgba(255,255,255,.3);
    }
  }
}
.gps{
  ul{
      .cur{
        background-color: #fff;
      }
  }
}

/* 底部导航栏 */
.footer{
  width: 100%;
  height: @width_20;
  padding:@width_20;
  bottom: 0;
  font-size: 12px;
  color:#fff;

  position: absolute;
  left: 0;
}
.footer{
  .leftS{
    .fl();
  }
}
.footer{
  ul{
    .fr();
    margin-right: 20px;
  }
}
.footer{
  ul{
    li{
      .fl();
    }
  }
}
.footer{
  ul{
    li{
      a{
        color:#fff;
        margin-right: @width_20 ;
        text-decoration: none;
      }
    }
  }
}
ul{
  li{
    a{
      span{
        margin-left: 10px;
      }
    }
  }
}

/*中间滚动图片*/
.scrollImg{
  width: 29px;
  height: 31px;

  position: absolute;
  left: 50%;
  bottom: 10px;
  margin-left: -15px;
  .animas(upAndDown,@time:0.8s);
}
@keyframes upAndDown {
  0%{.trans(@ty:10)}
  100%{.trans(@ty:0)}
}

/*头部logo*/
.head-logo{
  width: 254px;
  height: 50px;
  .pos(5%,5%);
  display: block;
  line-height: 50px;
}
.head-logo{
  img{
    width: 104px;
    height: 21px;
    .fl();
    vertical-align: middle;
    margin-top: 14px;
  }
}
.head-logo{
  a{
    .fr();
    width: 90px;
    height: 30px;
    border: 1px solid #fff;
    text-align: center;
   .cir(15px);
    line-height: 30px;
    margin-top: 10px;
    color:#fff;
    text-decoration: none;
  }
}

/*第一屏*/
.s1{
  background:url(../images/page1_glow.png) no-repeat center 100px, linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
}
//标题部分
.s1{
  .s1Title{
    .bx();
    padding: 60px 130px;
  }
}
.s1{
  .s1Title{
    img{
      width: 400px;
      .fl();
      vertical-align: middle;
    }
  }
}
.s1{
  .s1Title{
    a{
      .fl();
      color:#fff;
      width: 90px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      border: 1px solid #fff;
      text-decoration: none;
      .cir(20px);
      margin-top: 10px;
      margin-left: 110px;
      &:hover{
        background-color: #fff;
        color:#221b57;
      }
    }
  }
}
//动画内容
.s1{
  perspective: 1200px;
}
.s1{
  .s1Main,.s1Main ul{
    .bx(600,400);
    margin-top: -190px;
    transform-style: preserve-3d;
    .animas(s1Round,20s);
  }
}
@keyframes s1Round {
  0%{.trans(@ty:10)}
  100%{.trans(@ty:10,@ry:360)}
}
.s1{
  .s1Main{
    ul{
      li{
        .bx(580,361);
        backface-visibility: hidden;
      }
    }
  }
}
.s1{
  .s1Main{
    ul{
      li:nth-child(1){
        .trans();
      }
    }
  }
}
.s1{
  .s1Main{
    ul{
      li:nth-child(2){
        .trans(@tz:60);
      }
    }
  }
}
.s1{
  .s1Main{
    ul{
      li:nth-child(3){
       .trans(@tz:80,@ry:180);
      }
    }
  }
}
.s1{
  .s1Main{
    ul{
      li:nth-child(4){
        .trans(@tz:0,@ry:180);
      }
    }
  }
}
.s1{
  .s1Main{
    ul{
      li:nth-child(5){
        .trans(@tz:-60,@ry:180);
      }
    }
  }
}
//旋转圆环
.s1{
  .s1Cir{
    .bx(680,680);
    margin-top: -350px;
    .trans(@rx:72,@ry:-12,@sx:1.3,@sy:1.3);
  }
}
.s1{
  .s1Cir{
    img{
      .animas(s1Img,2s);
    }
  }
}
@keyframes s1Img {
  0%{.trans()}
  100%{.trans(@rz:360)}
}


/*第二屏*/
section.s2{
  background:url(../images/page1_glow.png) no-repeat center 100px, linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
}

.s2{
  perspective: 900px;
}
//底层背景
.s2{
  .s2Line{
    span{
      width: 100%;
      height: 1px;
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -0.5px;
      margin-left: 0;
      display: block;
      background-color: #c7e00e;
    }
  }
}
.s2{
  .s2Line{
    img:nth-of-type(1){
      .bx(346,123,65%);
    }
  }
}
.s2{
  .s2Line{
    img:nth-of-type(2){
      .bx(684,395,65%);
    }
  }
}
//中心动画
.s2{
  .s2Main,.s2Main ul{
    .bx();
  }
}

.s2{
  .s2Main{
    .tDelay(2s);
  }
}
.s2{
  .s2Main{
      ul{
        li{
          .bx(350,350);
        }
      }
  }
}
.s2{
  .s2Main{
    ul{
      li:nth-child(1) img{
        margin-left: 140px;
       .animas(s2Round,.3s);
      }
    }
  }
}
.s2{
  .s2Main{
    ul{
      li:nth-child(2) img{
        margin-left: 60px;
        .animas(s2Round,2.3s);
      }
    }
  }
}
.s2{
  .s2Main{
    ul{
      li:nth-child(3) img{
        margin-left: -30px;
        .animas(s2Round,5s);
      }
    }
  }
}
.s2{
  .s2Main{
    ul{
      li:nth-child(4) img{
        margin-left: -140px;
        .animas(s2Round,3s);
      }
    }
  }
}
@keyframes s2Round {
  0%{.trans(@rz:0)}
  100%{.trans(@rz:360)}
}
.s2{
  .s2Title{
    .bx(355,94,24%,40%);
    .tDelay(2s);
  }
}
//标题部分
.s2{
  .s2Title{
    p{
      color:#fff;
      font-size: 18px;
      font-weight: bold;
      line-height: 40px;
    }
  }
}
//入场动画
.s2.current{
  .s2Title,.s2Main{
    .trans(@sx:2,@sy:2);
  }
}


/*第三屏*/
section.s3{
  background:url(../images/page1_glow.png) no-repeat center 100px, linear-gradient(0deg, #395ecb 0%, #3657be 35%, #242161 75%, #1a0531 100%);
}
//底层背景
.s3{
  .s3Bg{
    ul{
      li:nth-child(1){
        img{
          .bx(1368,1111);
        }
      }
    }
  }
}
.s3{
  .s3Bg{
    ul{
      li:nth-child(2){
        img{
          .bx(131,130);
        }
      }
    }
  }
}
//中心动画
.s3{
  .pers();
}
.s3{
   .s3Main,.s3Main ul{
     .bx();
   }
 }
.s3{
 .s3Main{
   ul{
     .pre-3d();
     .trans(@rx:69);
     .animas(s3UlRound,8s);
   }
 }
}
.s3{
  .s3Main{
   ul{
     li{
       .bx(680,680);
       border: 2px solid #5ec0ff;
       .cir();
     }
   }
  }
}
.s3{
  .s3Main{
    ul{
      li:nth-child(1){
          .trans(@ry:-60);
      }
    }
  }
}
.s3{
  .s3Main{
    ul{
      li:nth-child(2){
          .trans(@ry: 0);
      }
    }
  }
}
.s3{
  .s3Main{
    ul{
      li:nth-child(3){
          .trans(@ry: 60);
        }
    }
  }
}
.s3{
  .s3Main{
    ul{
      li:nth-child(1){
        img{
          .animas(s3Round,2s);
        }
      }
    }
  }
}
.s3{
  .s3Main{
    ul{
      li:nth-child(2){
        img{
          .animas(s3Round,3s);
        }
      }
    }
  }
}
.s3{
  .s3Main{
    ul{
      li:nth-child(3){
        img{
          .animas(s3Round,4s);
        }
      }
    }
  }
}
@keyframes s3Round {
  0%{.trans()}
  100%{.trans(@rz:360)}
}
@keyframes s3UlRound {
  0%{.trans(@rx:69)}
  100%{.trans(@rx:69,@ry:360)}
}
//标题部分
.s3{
  .s3Title{
      .bx(450,149,75%);
      .trans(@ry:20,@rx:5);
    .tDelay(2s);
  }
}
//入场动画
.s3{
  .s3Main{
    .tDelay(2s);
  }
}
.s3.current{
  .s3Main{
    .trans(@sx:2,@sy:2);
}
}
.s3.current{
  .s3Title{
    .trans(@ty:1000,@ry:20,@rx:5);
  }
}


/*第四屏*/
section.s4{
  background: url(../images/page4_glow.png) no-repeat center 200px, linear-gradient(0deg, #ff9f42 0%, #ed923d 35%, #6d3816 75%, #2e0b04 100%);
}
//底层背景
.s4{
  .pers();
}
.s4{
   .s4Bg{
     .bx(4000,200,0,65%);
   }
 }
.s4{
  .s4Bg{
  span{
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #fff;
    display: block;
    top:0
  }
  }
}
.s4{
  .s4Bg{
    span:nth-of-type(2){
      bottom: 0;
      top:auto;
    }
  }
}
.s4{
  .s4Bg{
    img{
      .bx(346,123,70%,0);
      .animas(s4BR,2s);
    }
  }
}
.s4{
  .s4Bg{
    img:nth-of-type(2){
      .bx(346,123,70%,100%);
      .animas(s4BR,.5s);
    }
  }
}
@keyframes s4BR {
  0%{.trans(@tx:-2000)}
  100%{.trans()}
}
//中心动画部分
.s4{
  .s4Main,.s4Main ul{
    .bx();
  }
}
.s4{
  .s4Main{
    ul{
      .trans(@rx:40);
      .pre-3d();
    }
  }
 }
.s4{
  .s4Main{
    ul{
      li{
        .bx(414,414);
      }
    }
  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(1){
        .trans(@tz:30);
      }
    }
  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(2){
        .trans(@tz:30);
      }
    }
  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(3){
        .trans(@tz:-90,@sx:1.2,@sy:1.2);
      }
    }
  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(4){
        .trans(@tz:-90);
      }
    }
  }
}
.s4{
   .s4Main{
     ul{
       li:nth-child(5){
         .trans(@tz:40);
       }
     }
   }
 }

.s4{
   .s4Main{
     ul{
       li:nth-child(1){
         img{
           .animas(s4Round,60s)
         }
       }
     }
   }
 }
.s4{
  .s4Main{
    ul{
      li:nth-child(2){
        img{
          .animas(s4Round,20s)
        }
      }
    }
  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(3){
        img{
          .animas(s4Round,20s)
        }
      }
    }

  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(4){
        img{
          .animas(s4Round,5s)
        }
      }
    }

  }
}
.s4{
  .s4Main{
    ul{
      li:nth-child(5){
        img{
          .animas(s4Round,8s)
        }
      }
    }
  }
}
@keyframes s4Round {
  0%{.trans()}
  100%{.trans(@rz:360)}
}
//左边图片
.s4{
  .s4Tag{
    .bx(300,40,27%,40%);
    .tDelay(3s);
  }
}
.s4{
  .s4Tag{
    p{
      color:#fff;
      font-size: 18px;
      line-height: 40px;
    }
  }
}
//右边标题
.s4{
  .s4Title{
    .bx(300,71,69%,45%);
    .trans(@ry:25);
    .tDelay(4s);
  }
}
//入场动画
.s4.current{
  .s4Main{
    .trans(@sx: 2,@sy: 2);
  }
}
.s4{
  .s4Main{
    .tDelay(4s);
  }
}

.s4.current{
  .s4Tag{
    .trans(@ty:-1000)
  }
}
.s4.current{
  .s4Title{
    .trans(@tx:-1000)
  }
}


/*第五屏*/
.s5{
  background: url(../images/page5_glow.png) no-repeat center -300px,linear-gradient(0deg, #d74d53 0%, #c44655 35%, #4c184c 75%, #110145 100%);
  position: relative;
}
//中心动画
.s5{
  .s5Bg,.s5Bg ul{
    .bx();
  }
}
.s5{
  .s5Bg{
    ul{
      li{
        .tDelay(2s);
      }
    }
  }
}
.s5{
  .s5Bg{
    ul{
      li{
        img{
          vertical-align: middle  ;
        }
      }
    }
  }
}
.s5{
  .s5Bg{
    ul{
      li:nth-child(1){
        .bx(305,305);
        background: url(../images/page5_bubble_glow.png) no-repeat;
        text-align: center;
        line-height: 305px;
      }
    }
  }
}
.s5{
  .s5Bg{
    ul{
      li:nth-of-type(n+2){
        background: url(../images/page5_bubble.png) no-repeat;
        text-align: center;
        background-size: cover;
        .cir();
      }
    }
  }
}
.s5{
   .s5Bg{
     ul{
       li:nth-of-type(2){
         .bx(210,210,34%,25%);
         line-height: 210px;
       }
     }
   }
 }

.s5{
  .s5Bg{
    ul{
      li:nth-of-type(3){
        .bx(250,250,28%,75%);
        line-height: 250px;
      }
    }
  }
}

.s5{
  .s5Bg{
    ul{
      li:nth-of-type(4){
        .bx(180,180,79%,78%);
        line-height: 180px;
      }
    }
  }
}

.s5{
  .s5Bg{
    ul{
      li:nth-of-type(5){
        .bx(130,130,78%,29%);
        line-height: 130px;
      }
    }
  }
}
.s5{
  .s5Bg{
    ul{
      li:nth-of-type(6){
        .bx(100,100,89%,34%);
        line-height: 100px;
      }
    }
  }
}
//左边部分
.s5{
  .s5Tag{
      .bx(400,40,28%);
      color:#fff;
      font-size: 18px;
      line-height: 30px;
      .tDelay(2s);
  }
}
//右边部分
.s5{
  .s5Title{
      .bx(410,121,78%);
    .tDelay(2s);
  }
}
//入场动画
.s5.current{
  .s5Tag,.s5Title{
    .trans(@ry:180)
  }
}
.s5.current{
  .s5Bg{
    ul{
      li:nth-child(1),li:nth-child(2),li:nth-child(3){
        .trans(@tx:-800,@ty:-500);
      }
    }
  }
}
.s5.current{
  .s5Bg{
    ul{
      li:nth-child(4),li:nth-child(5),li:nth-child(6){
        .trans(@tx:800,@ty:-300);
      }
    }
  }
}